<!-- 
    @file: 移动端菜单组件
    @auth: lizibin
 -->
<template>
    <el-menu :default-active="route.path" class="el-menu-vertical-demo" text-color="#646464" active-text-color="#2FA7B9"
        :router="true">
        <el-menu-item index="/" @click="closeDrawer('没错,这是个博客')">
            <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/article" @click="closeDrawer('全部文章')">
            <span>全部文章</span>
        </el-menu-item>
        <el-menu-item index="/website" @click="closeDrawer('网站链接')">
            <span>网站链接</span>
        </el-menu-item>
        <el-menu-item index="/message" @click="closeDrawer('留言板')">
            <span>留言板</span>
        </el-menu-item>
        <el-menu-item index="/about" @click="closeDrawer('关于')">
            <span>关于</span>
        </el-menu-item>
        <el-menu-item index="/login" v-show="!state.userInfo" @click="closeDrawer">
            <span>登录/注册</span>
        </el-menu-item>
        <el-menu-item index="/backstageHome" v-show="state.userInfo" @click="closeDrawer">
            <span>已登录，进入后台</span>
        </el-menu-item>
        <el-menu-item v-show="state.userInfo">
            <el-dropdown style="width:100%;height: 100%;cursor: pointer;">
                <div class="el-dropdown-link" style="width:100%;margin: auto;">
                    <img v-if="state.userInfo.userIcon !== null && state.userInfo.userIcon !== ''"
                        :src="state.url + state.userInfo.userIcon"
                        style="width: 30px;margin-right: 10px;vertical-align:middle;border-radius: 50px;" />
                    <img v-if="state.userInfo.userIcon === null || state.userInfo.userIcon === ''"
                        src="../../../../assets/default_avatar.svg"
                        style="width: 30px;margin-right: 10px;vertical-align:middle;border-radius: 50px;">
                    <span>
                        {{ state.userInfo.userName }}
                    </span>

                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu v-if="state.userInfo.userType === 0">
                        <el-dropdown-item @click="toPath('/addArticle')">新建文章</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/articleManager')">文章管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/classifyManager')">分类管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/commentManager')">评论管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/userManager')">用户管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/linkManager')">链接管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/personSetup')">个人设置</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/systemSetup')">系统设置</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/carouseMap')">轮播图</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/circulateText')">循环字</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/visitIp')">访问信息</el-dropdown-item>
                        <el-dropdown-item divided @click="exit">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    <el-dropdown-menu v-else>
                        <el-dropdown-item @click="toPath('/addArticle')">新建文章</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/articleManager')">文章管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/commentManager')">评论管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/personSetup')">个人设置</el-dropdown-item>
                        <el-dropdown-item divided @click="exit">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-menu-item>
    </el-menu>
</template>

<script lang="ts" setup>
import {
    reactive,
    onMounted,
} from "vue"
import {
    useRoute,
    useRouter
} from "vue-router"
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const Store = useStore()
const { LoginInfo } = storeToRefs(Store)
const { data: LoginData } = LoginInfo.value;
const router = useRouter();
const emit = defineEmits(['onCloseDrawer'])

const route = useRoute();
const state = reactive({
    // 当前登录的用户信息
    userInfo: {} as any,
    // 服务器路径
    url: import.meta.env.VITE_HTTP,
});

onMounted(() => {
    // 获取用户信息
    if (LoginData) {
        const userInfo = LoginData.data[0];
        state.userInfo = userInfo;
    }
});
// 退出登录
const exit = () => {
    // 刷新界面
    window.location.reload();
}
// 前往某个界面
const toPath = (path: string) => {
    router.push({
        path
    });
}

// 关闭抽屉
const closeDrawer = (msg: string) => {
    window.document.title = msg
    emit('onCloseDrawer', false)
}


</script>

<style scoped>
:global(.el-drawer__body) {
    padding: 0px !important;
}

.el-menu-item:hover {
    background-color: rgba(47, 167, 185, 0.1);
}

.el-menu-item.is-active {
    border-left: 5px solid #2fa7b9;
}

:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
    background-color: rgba(47, 167, 185, 0.1);
    color: #2fa7b9;
}

.el-menu-item * {
    vertical-align: baseline;
}
</style>